<template>
    <div>
        <div class="tip-tilte">
            CONNECT WITH FACEBOOK
        </div>
        <div class="login-box">
            <div class="lg-tilte font-blod">SIGN IN</div>
            <div  class="input-gr">
                <label for="Email">Email</label>
                <mt-field placeholder="Please enter email" v-model="userData.name"></mt-field>
            </div>
            <div class="input-gr">
                <label for="Password">Password</label>
                <mt-field placeholder="Please enter password" v-model="userData.password"></mt-field>
            </div>
            <p class="color-9" style="font-size:0.75rem;text-align:center">Forget your password?</p>
        </div>
        <mt-button type="default" class="lg-btn">SIGN IN</mt-button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                userData: {
                    name: '',
                    password: ''
                }

            }
        },
        mounted() {

        }
    }
</script>
<style scoped>
    .tip-tilte{
        font-size: 1.25rem;
        background-color: #C57992;
        color: #fff;
        width: 80%;
        text-align: center;
        margin: 10px auto;
        padding: 10px;
        border-radius: 20px;
    }
    .login-box{
        width: 100%;
        margin: 20px auto;
        padding: 20px;
        
    }
    .lg-tilte {
        text-align: center;
        font-size: 1.25rem;
    }
    .lg-btn{
        position: fixed;
        bottom: 0;
        width: 100%;
    }
    .input-gr label{
        font-size: 0.75rem;
        color: #999;
    }
    .input-gr input{
        border: none;
    }
    .input-gr{
    }

</style>